<template>
  <el-container>
    <el-aside width="auto">
      <Menu></Menu>
    </el-aside>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <Tab></Tab>
      <el-main>
         <transition name="fade" mode="out-in">
        <!-- <keep-alive :include="$store.state.layout.tabs.keepAlive"> -->
          <router-view v-loading="$store.state.layout.loading"></router-view>
        <!-- </keep-alive> -->
         </transition>
      </el-main>
      <el-footer>
        <el-row>
          <el-col :xl="9" :lg="10" :md="12" :sm="14" :offset="8">
            <p>Copyright © 2018 All Rights Reserved </p>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
  import Menu from '../components/menu'
  import Header from '../components/head'
  import Tab from '../components/Tab'
  import { menuRouter } from '@/router/index'
  export default {
    components: {
      Menu,
      Header,
      Tab
    },
    beforeRouteEnter (to, from, next) {
      next(
      //   next 内部的是回调函数
      //   vm 回调参数是vue实例
         function(vm){}
       )
      // ps: 只有beforeRouteEnter 的next有回调函数，因为其他守卫可以在函数内写this来调用vm实例
      next(vm => {
         if(vm.$store.state.token == '') return '/login'
        // 如果直接访问子菜单，则需要添加标签页

         if(vm.$store.getters['layout/menuIndex']){
           vm.$store.commit('layout/addTab',to);
         }
      })

    },
    watch:{

    },
    beforeMount(){
      if(!this.$http.defaults.headers.Authorization){
        this.$http.defaults.headers.Authorization = 'Bearer'+' '+localStorage.getItem('token')
      }
    },
    data(){
      return {
        loading: false,
      }
    },
    created(){
      console.log(this.$router.options)
    },
  }
</script>

<style scoped lang="stylus">
  @import "~@/stylus/base"
  .el-container{
    height: 100%;
  }
  .el-header{
    display: flex;
     box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);
  }
  .el-main{
    padding 15px;
  }
</style>
